<template>
  <div>
    <Card>
      <Row>
        <!-- 会议通知 -->
        <i-col span="12" class="left">
          <div class="leftInfo">
            <div class="first">
              <div class="leftTitle">
                <div>
                  <Icon type="ios-list-box" class="titleIcon" />
                </div>
                <div class="titleInfo">会议通知</div>
                <div>
                  <Button
                    size="small"
                    :class="meetingDetail.state==0?'cardExtra cardExtra1':(meetingDetail.state==1?'cardExtra cardExtra2':'cardExtra cardExtra3')"
                  >{{meetingDetail.state==0?'未开始':(meetingDetail.state==1?"会议中":(meetingDetail.state==2?"已结束":"已取消"))}}</Button>
                </div>
              </div>
              <div class="messageInfo">
                <Row>
                  <i-col span="4" class="messageLabel">会议主题</i-col>
                  <i-col span="15" class="messageValue">{{meetingDetail.theme}}</i-col>
                </Row>
                <Row>
                  <i-col span="4" class="messageLabel">会议发起人</i-col>
                  <i-col span="15" class="messageValue">{{meetingDetail.createroperator}}</i-col>
                </Row>
                <Row>
                  <i-col span="4" class="messageLabel">主讲人</i-col>
                  <i-col span="15" class="messageValue">{{meetingDetail.speakerName}}</i-col>
                </Row>
                <Row>
                  <i-col span="4" class="messageLabel">会议管理机构</i-col>
                  <i-col
                    span="15"
                    class="messageValue"
                  >{{meetingDetail.manageCom}}-{{meetingDetail.manageComeName}}</i-col>
                </Row>
                <Row>
                  <i-col span="4" class="messageLabel">会议地点</i-col>
                  <i-col span="15" class="messageValue">{{meetingDetail.place}}</i-col>
                </Row>
                <Row>
                  <i-col span="4" class="messageLabel">会议日期</i-col>
                  <i-col
                    span="15"
                    class="messageValue"
                  >{{meetingDetail.meettingDate?meetingDetail.meettingDate.substr(0,10):''}}</i-col>
                </Row>
                <Row>
                  <i-col span="4" class="messageLabel">开始时间</i-col>
                  <i-col span="15" class="messageValue">{{meetingDetail.startTime}}</i-col>
                </Row>
                <Row>
                  <i-col span="4" class="messageLabel">结束时间</i-col>
                  <i-col span="15" class="messageValue">{{meetingDetail.endTime}}</i-col>
                </Row>
                <Row>
                  <i-col span="4" class="messageLabel">会议内容概述</i-col>
                  <i-col span="15" class="messageValue omit">{{meetingDetail.uml}}</i-col>
                </Row>
                <Row style="margin-top:20px" v-if="meetingDetail.state <= 1">
                  <span v-if="uerTrainMyselfVO.jionflag == 0">
                    <Button type="primary" @click="sureMeeting()">确认</Button>
                  </span>
                </Row>
              </div>
            </div>
          </div>
        </i-col>
        <!-- 右侧信息 -->
        <i-col span="12" class="right">
          <!-- 参会人员 -->
          <div class="personList">
            <div class="listTitle">参会人员</div>
            <div class="listDetail">
              <Timeline>
                <TimelineItem v-if="uerTrainMyselfVO != null">
                  <span class="blueCircle" slot="dot"></span>
                  <div class="listDetail1">
                    <div>
                      <div class="listDetail-name">
                        {{uerTrainMyselfVO.name}}
                        <Icon type="md-contact" class="fileIcon" />
                      </div>
                      <div class="listDetail-no">员工编号：{{uerTrainMyselfVO.agnetcode}}</div>
                    </div>
                    <div class="listDetailRight">
                      <div class="listDetail-icon">
                        <!-- <img :src="uerTrainMyselfVO.icon" alt /> -->
                      </div>
                      <div class="listDetail-no">{{uerTrainMyselfVO.name}}</div>
                    </div>
                  </div>
                </TimelineItem>
                <TimelineItem v-for="item in uerTrainUserVOS" :key="item">
                  <span class="blueCircle" slot="dot"></span>
                  <div class="listDetail1">
                    <div>
                      <div class="listDetail-name">{{item.name}}</div>
                      <div class="listDetail-no">员工编号：{{item.agnetcode}}</div>
                    </div>
                    <div class="listDetailRight">
                      <div class="person-icon">
                        <!-- <img :src="item.icon" alt /> -->
                      </div>
                      <div class="listDetail-no">{{item.name}}</div>
                    </div>
                  </div>
                </TimelineItem>
                <!-- <TimelineItem>
                  <span class="blueCircle" slot="dot"></span>
                  <p class="time">2011年10月5日</p>
                  <p class="content">史蒂夫·乔布斯去世</p>
                </TimelineItem>-->
              </Timeline>
            </div>
          </div>
          <!-- 文件列表 -->
          <div class="relateFile">
            <div class="fileTitle">相关文件</div>
            <List border class="fileList">
              <div slot="header" class="fileContent">
                <span>文件名称</span>
                <span class="headerOperate">操作</span>
              </div>
              <ListItem v-for="item in fileList" :key="item">
                <ListItemMeta>
                  <span slot="description" style="color:#000">
                    {{item.filename}}
                    <span v-if="item.meettingflag === '1'">
                      <Icon type="md-list-box" class="fileIcon" />
                    </span>
                  </span>
                </ListItemMeta>
                <template slot="action">
                  <li>
                    <a href="#" v-if="item.typeFg == 0" @click="showFile(item.filepath)">查看</a>
                    <a href="#" v-if="item.typeFg == 1" @click="playVideo(item)">播放</a>
                  </li>
                </template>
              </ListItem>
            </List>
          </div>
        </i-col>
      </Row>
    </Card>

    <!-- 会议取消时，提示框 -->
    <Modal v-model="delMedal" header-hide="true" footer-hide="true" width="450">
      <div>
        <span style="font-size:28px; color:#FF9900;margin: 0 10px;">
          <Icon type="ios-help-circle" />
        </span>
        <span slot="header" style="font-size:16px">取消确认</span>
      </div>
      <span style="display:block;margin:20px 0 20px 60px; font-size:14px;">您确定要取消该会议吗？</span>
      <div style="width:400px; text-align:right;">
        <Button type="primary" @click="delSubmit" style="margin-right:20px;">确定</Button>
        <Button @click="delCancel">取消</Button>
      </div>
    </Modal>

    <!-- 播放视频 -->
    <Modal
      footer-hide="true"
      :value="videoModal"
      :mask-closable="true"
      @on-visible-change="modalVisibleChange"
      :closable="false"
    >
      <span class="photoModal">
        <!-- <video :src="photoItem" controls id="video1" controlslist="nodownload" /> -->
      </span>
    </Modal>

    <Button @click="info" v-if="false"></Button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 会议详情
      meetingDetail: [],
      // 某个会议的部分内容
      meeting: [],
      // 参会人员 --- 本人
      uerTrainMyselfVO: null,
      // 参会人员 ---其他人
      uerTrainUserVOS: null,
      // 文件列表
      fileList: [],
      meetingFlag: null,
      delMedal: false,
      videoModal: false,
      photoItem: ""
    };
  },
  methods: {
    // 提示语
    info(tip) {
      this.$Message.info(tip);
    },

    // 显示会议详情
    initail() {
      // 会议详情
      this.api
        .queryMeettingById({ meetSerialNo: this.meeting.meetSerialNo })
        .then(res => {
          if (res.code == 200 && res.data != null) {
            this.meetingDetail = res.data;
          }
        });
      // 参会人员
      this.api
        .queryParticipant({
          manageCom: 11,
          meetSerialNo: this.meeting.meetSerialNo
        })
        .then(res => {
          if (res.code == 200 && res.data != null) {
            this.uerTrainMyselfVO = res.data.uerTrainMyselfVO;
            this.uerTrainUserVOS = res.data.uerTrainUserVOS;
          } else {
            this.$Message.info("人员查询失败");
          }
          // console.log(this.uerTrainUserVOS)
        });
      // 文件列表
      this.api
        .queryMeettingFileList({
          index: 1,
          pageSize: 500,
          meetSerialNo: this.meeting.meetSerialNo
        })
        .then(res => {
          if (res.code == 200) {
            res.data.forEach(element => {
              let typeFg = element.filename.split(".");
              typeFg = typeFg[typeFg.length - 1];
              if (typeFg == "pdf") {
                element["typeFg"] = "0";
              } else {
                element["typeFg"] = "1";
              }
              this.fileList.push(element);
            });
            // this.fileList = res.data;
          }
        });
    },

    // 关闭视频弹窗
    modalVisibleChange(value) {
      if (!value) {
        this.videoModal = false;
        let video1 = document.getElementById("video1");
        video1.pause();
      }
    },

    // 查看文件
    showFile(fileUrl) {
      window.open(fileUrl + "#toolbar=0");
    },

    // 播放视频
    playVideo(item) {
      this.videoModal = true;
      this.photoItem = item.filepath;
    },

    // 取消会议
    cancelMeeting() {
      this.delMedal = true;
    },
    delCancel() {
      this.delMedal = false;
    },
    delSubmit() {
      this.delMedal = false;
      this.api
        .deleteMeettingById({ meetSerialNo: this.meeting.meetSerialNo })
        .then(res => {
          if (res.code == 200) {
            this.sendEmail();
            this.meetingDetail.state = 4;
            // this.$router.push({
            //   name: "mettingSet"
            // });
            this.info(res.msg);
          } else {
            this.info(res.msg);
          }
        });
    },

    // 变更会议
    changeMeeting() {
      this.$router.push({
        name: "changeMeeting",
        query: {
          row: this.meeting
        }
      });
    },

    // 确认会议
    sureMeeting() {
      this.api
        .updateInfoById({ meetSerialNo: this.meeting.meetSerialNo })
        .then(res => {
          if (res.code == 200) {
            this.meetingFlag = 2;
            this.uerTrainMyselfVO.jionflag = 1;
            this.$Message.info("会议确认成功");
          } else {
            this.$Message.info("会议确认失败");
          }
        });
    },

    // 发送邮件 ---会议制定
    sendEmail() {
      this.api
        .sendEmail({ mailType: 1, meetSerialNo: this.meeting.meetSerialNo })
        .then(res => {
          if (res.code == 200) {
          } else {
            this.info("发送邮件失败");
          }
        });
    }
  },
  mounted() {
    this.initail();
  },
  created() {
    this.meeting = this.$route.query.item;
    this.meetingFlag = this.$route.query.meetingFlag;
  },
  beforeDestroy() {
    this.meetingDetail = null;
    this.meeting = null;
    this.uerTrainMyselfVO = null;
    this.uerTrainUserVOS = null;
    this.fileList = null;
    this.meetingFlag = null;
    this.delMedal = null;
    this.videoModal = null;
    this.photoItem = null;
  }
};
</script>
<style scoped lang="less">
@import "./messageDetail";
</style>

<style>
.ivu-list-bordered .ivu-list-header {
  background-color: rgba(24, 144, 255, 0.04);
  padding: 0px;
}

.ivu-modal-header {
  background-color: #2d8cf0;
}
.ivu-modal-close .ivu-icon-ios-close {
  color: #fff !important;
}
.listDetail .ivu-timeline-item-head-custom {
  margin-top: 12px;
}
</style>